<template>
	<view class="home">
		<u-navbar title="房源发布" :bgColor="bgColor" :titleStyle="titleStyle">
			<view class="u-nav-slot" slot="left"
				style="display: flex;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;"
				@click="handleLocation">
				<u-icon name="map" size="19" color="#ffffff"></u-icon>
				<view class="" style="margin-left: 5rpx;">
					{{city}}
				</view>
			</view>
		</u-navbar>

		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view>
		<view class="bannerBoxOut">
			<view class="bannerBox">
				<view class="searchBox" @click="handleGotoSearch">
					<image class="searchIcon" src="http://120.76.245.175/uploads/image/searchIcon.png"
						style="width: 26rpx; height: 26rpx;">
					</image>
					<input class="inputItem" type="text" placeholder="请输入房源号、社区或房源名称进行搜索" :disabled="true">
				</view>
				<view class="bannerContent">

					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						style="width: 690rpx; height: 320rpx;">
						<swiper-item v-for="(item,index) in bannerList" :key="index" style="text-align: center;">
							<image class="contentImg" :src="item.image" style="width: 690rpx; height: 320rpx; border-radius: 20rpx;"
								@click="handleDetail(item.house_id)"></image>
						</swiper-item>
					</swiper>

				</view>

				<view class="sortBox">
					<view class="sortItem" v-for="(item,index) in categoryList" :key="item.id"
						@click="handleGotoHouse(index)">
						<image class="sortimg" :src="item.image"
							style="width: 76rpx; height: 76rpx; border-radius: 10rpx;">
						</image>
						<view class="sorttext">
							{{item.name}}
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="" :style="{'height':650 +'rpx'}"></view>


		<view class="RefreshBox">
			<view class="RefreshLeft">
				<image class="refreshimg" src="http://120.76.245.175/uploads/image/locationIcon.png"
					style="width: 40rpx; height: 40rpx;">
				</image>
				<view class="refreshtext">
					离我最近
				</view>
			</view>

			<view class="RefreshRight">
				<image class="refreshimg" src="http://120.76.245.175/uploads/image/shuaxin.png"
					style="width: 26rpx; height: 26rpx;">
				</image>
				<view class="refreshtext" @click="handleSx">
					刷新
				</view>
			</view>

		</view>

		<!-- <view class="" style="height: 755rpx; background-color: #F7F8FA;"></view> -->
		<!-- <template v-if="houseList.length"> -->
		<!-- <view class="DataListBox" id="ListBoxID" :style="'height:calc(100vh - '+listTop+'px)'"> -->
		<view v-if="houseList.length" class="DataListBox" id="ListBoxID">
			<view class="dataItem" v-for="(item,index) in houseList" :key="index" @click="handleDetail(item.id)">

				<view class="dataItemLft">
					<image class="refreshimg" :src="item.image"
						style="width: 240rpx; height: 240rpx;border-radius: 20rpx" mode="aspectFit">
					</image>
				</view>
				<view class="dataItemRight">
					<view class="name">
						{{item.name}}
					</view>
					<view class="distanceBox">
						<view class="distance">
							{{item.remark}}
						</view>
						<view class="km">
							{{item.distance}}km
						</view>
					</view>
					<view class="advantage">

						<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
							{{subitem.name}}
						</view>
					</view>
					<view class="expense">
						<view class="expenseitem">
							{{item.price}}元/月
						</view>
						<view class="collect">
							{{item.collect}}收藏
						</view>

					</view>

				</view>
			</view>
			<view class="" style="height: 100rpx;">
			</view>
		</view>
		<view v-else class="empty-sty">
			<u-empty mode="data" text="暂无该地区房源" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		houseList,
		houseCategoryt,
		positioning,
		houseBanner,
		mineData
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				listTop: 0,
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				tabsHeight: "",
				categoryList: [],
				city: "",
				houseList: [],
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				pageNum: 1,

			}
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.redirectTo({
					url: "../login/index"
				})
			}
			const systemInfo = uni.getSystemInfoSync();
			const navigationBarHeight = systemInfo.screenHeight - systemInfo.windowHeight;
			this.tabsHeight = navigationBarHeight - systemInfo.statusBarHeight;

			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('#ListBoxID').boundingClientRect(data => {
				console.log("ListBoxID", data.top) //这个就是距离顶部的高度
				this.listTop = data.top + 70 //赋值，待会要用
			}).exec();

			console.log('底部tabs的高度：', this.listTop);

			this.getNavbarHeight()

			this.getHouseCategoryt()
			this.getHouseBanner()
			// this.getHouseList();
			this.getMineData()
		},
		onShow() {
			if (!uni.getStorageSync("token")) {
				uni.redirectTo({
					url: "../login/index"
				})
			}

			let handleData = uni.getStorageSync("handleData")
			if (handleData.flag) {
				console.log("uni.getStorageSync", uni.getStorageSync("handleData").flag)
				this.houseList.forEach((item, index) => {
					if (handleData.handleId == item.id) {
						if (handleData.type == 1) {
							item.collect++
						} else {
							item.collect--
						}
						uni.removeStorageSync("handleData")
						return
					}
				})
			}

			let handleLocationHome = uni.getStorageSync("handleLocationHome")
			console.log("handleLocationHome", handleLocationHome)
			if (handleLocationHome.flag) {
				this.city = handleLocationHome.city
				this.pageNum == 1
				this.getHouseList();
				uni.removeStorageSync("handleLocationHome")
			}

		},
		onReachBottom() {
			this.pageNum++;
			this.getHouseList();
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
				setTimeout(() => {
					this.pageNum = 1;
					this.getHouseList();
					uni.stopPullDownRefresh();
				}, 2000)
		},
		methods: {
			async getMineData() {
				let res = await mineData()
				// console.log("个人信息", res)
				if (res.data.city == null) {
					console.log("重新定位")
					this.siteGzh()
				} else {
					console.log("重新获取列表")
					this.city = res.data.city
					this.getHouseList();
				}
			},
			async getHouseBanner() {
				let res = await houseBanner()
				console.log("轮播图", res)
				this.bannerList = res.data
			},
			async getHouseCategoryt() {
				let res = await houseCategoryt()
				if (res.code == 1000) {
					this.categoryList = res.data
				}
				// console.log("房子分类", res)
			},
			async handlepositioning() {
				console.log("this.city", this.city)
				let res = await positioning({
					city: this.city
				})
				if (res.code == 1000) {
					console.log("更新城市", res)
					this.getHouseList()
				}
			},
			handleLocation() {
				uni.navigateTo({
					url: "./location"
				})
			},

			async getHouseList() {
				let data = {
					position: "1",
					page: this.pageNum,
					page_size: 5,
				}
				let res = await houseList(data)

				if (res.message == "该地区暂无数据") {
					this.houseList = []
					uni.showToast({
						title: "该地区暂无房源！",
						icon: "none",
						duration: 1500
					});
					return
				}
				if (res.code == 1000) {
					if (res.data.data.length > 0) {
						if (this.pageNum == 1) {
							this.houseList = res.data.data;
						} else {
							this.houseList = this.houseList.concat(res.data.data)
						}
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}
					console.log("数据长度", this.houseList.length)
				} else {
					// this.pageNum --
					uni.showToast({
						title: "暂无更多数据",
						icon: "none",
						duration: 1000
					});
				}
			},
			handleGotoHouse(index) {
				uni.setStorageSync("houseindex", index)
				uni.switchTab({
					url: "../housingresource/index"
				})
			},
			handleSx() {
				this.pageNum = 1
				this.getHouseList()
				this.getHouseCategoryt()
				this.getHouseBanner()
			},


			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				// console.log("高度", this.globalData)

			},
			handleGotoSearch() {
				uni.navigateTo({
					url: "./search"
				})
			},
			handleDetail(id) {

				uni.navigateTo({
					// url: "./homedetail"
					url: `./homedetail?id=${id}`
				})
			},

			// 获取定位、
			siteGzh() {
				let that = this;
				uni.request({
					url: "https://restapi.amap.com/v3/ip?parameters", // access_token从服务端获取
					method: 'GET',
					data: {
						// key: '86627221df3646a71923813a017a373c',
						key: 'a7e60771418acdb802aab4d206c080c3',
					},
					success: function(res) {
						console.log("定位数据", res);

						that.city = res.data.city
						that.handlepositioning()
					},
					//定位失败回调
					fail: function() {
						that.city = "深圳"
						that.handlepositioning()

						// uni.showToast({
						// 	title: "请检查定位权限",
						// 	icon: "none",
						// 	mask: true
						// })
					}
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		.navbar {
			width: 100%;
			height: 182rpx;
			background-color: #F8AD22;
			padding-top: 88rpx;
			box-sizing: border-box;

			.navbarContent {
				width: 100%;
				height: 88rpx;
				padding: 30rpx 22rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				position: relative;

				.Locations {
					display: flex;
					position: absolute;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
				}

				.title {
					width: 150rpx;
					margin: 0 auto;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.bannerBoxOut {
			width: 100%;
			background-color: #F7F8FA;
			min-height: 650rpx;
			z-index: 999;
			position: fixed;
		}

		.bannerBox {
			width: 100%;
			height: 348rpx;
			background-color: #F8AD22;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			padding-top: 15rpx;
			position: fixed;
			// top: 168rpx;

			.searchBox {
				width: 690rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding-left: 66rpx;
				box-sizing: border-box;
				position: relative;


				.inputItem {
					width: 624rpx;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					opacity: 1;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 30rpx;
				}

				.searchIcon {
					position: absolute;
					top: 25rpx;
					left: 30rpx;
				}
			}

			.bannerContent {
				width: 690rpx;
				height: 320rpx;
				margin-top: 20rpx;
			}
		}


		.sortBox {
			width: 690rpx;
			height: 190rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.sortItem {
				width: 78rpx;
				text-align: center;
				margin-right: 99rpx;

				.sorttext {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
			}

			.sortItem:nth-child(4n) {
				margin-right: 0;
			}

		}


		.RefreshBox {
			width: 690rpx;
			height: 50rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// position: fixed;
			// top: 815rpx;
			// left: 30rpx;

			.RefreshLeft {
				display: flex;
				align-items: center;

				.refreshtext {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
					margin-left: 4rpx;
				}
			}

			.RefreshRight {
				width: 104rpx;
				height: 50rpx;
				background: #F8AD22;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				display: flex;
				align-items: center;
				padding-left: 10rpx;
				box-sizing: border-box;

				.refreshtext {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 50rpx;
					margin-left: 4rpx;
				}
			}

		}


		.DataListBox {
			// overflow: scroll;
			width: 690rpx;
			margin: 0 auto;
			margin-top: 10px;

			.dataItem {
				display: flex;
				width: 690rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 20rpx;

				.dataItemLft {
					margin-right: 20rpx;
				}

				.dataItemRight {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					flex: 1;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 33rpx;

					}

					.distanceBox {
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 26rpx;
						display: flex;
						justify-content: space-between;

					}

					.advantage {
						display: flex;

						.advantageitem {
							width: 80rpx;
							height: 40rpx;
							background: #FFF5E1;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F06703;
							line-height: 40rpx;
							text-align: center;
							margin-right: 30rpx;
						}
					}

					.expense {
						display: flex;
						justify-content: space-between;

						.expenseitem {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #F23A00;
							line-height: 35rpx;
						}

						.collect {
							font-size: 22rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F8AD22;
							line-height: 26rpx;
						}
					}
				}
			}

		}

	}

	.empty-sty {
		padding-top: 150rpx;
	}
</style>